<template>

    <div>
        
    
    </div>
    <div class="content-edit">

        <el-form :model="info" label-width="120px" style="max-width: 560px">

            <el-form-item label="名称">
                <el-input class="w-50" v-model="info.name" />
            </el-form-item>

            <el-form-item label="图片">
                <el-upload
                    class="avatar-uploader"
                    :action="VITE_URL + '/admin.fileUpload/upload2'"
                    :show-file-list="false"
                    :on-success="uploadSuccess"
                >
                    <img v-if="info.image" :src="VITE_URL + '/storage/' + info.image" class="avatar" />
                    <el-icon v-else class="avatar-uploader-icon">
                        <Plus />
                    </el-icon>
                </el-upload>
            </el-form-item>
            <el-form-item label="字母排序">
                <el-input v-model="info.letter_pre" min="A" max="Z" >
                    <template #append>请输入：A-Z</template>
                </el-input>
            </el-form-item>

            <el-form-item label="状态">
                <el-select v-model="info.status" placeholder="选择状态">
                    <el-option label="启用" value="1" />
                    <el-option label="禁用" value="0" />
                </el-select>
            </el-form-item>


            <el-form-item>
                <el-button type="primary" @click="do_edit">保存</el-button>
            </el-form-item>


        </el-form>
    </div>

</template>

<script setup lang="ts">

import { ref } from 'vue';
import axios from 'axios';
import { Plus } from '@element-plus/icons-vue'
import { useRoute, useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';

const VITE_URL = window.VITE_URL;
const route = useRoute();
const router = useRouter();

const info:any = ref<object>({
    name:'',
    letter_pre:'',
    status:'',
    id:0,
    image:'',
});

const brandList:any = ref<Array<object>>([])

const querySearch = ( queryString: string, callback:(arg: any) => void ) => {

    var url = VITE_URL + '/admin.brand/search';

    url += '?filter=' + queryString;

    axios.get( url ).then(function( res ){

        callback( res.data )

    });

}

const single = function(){

    var url = VITE_URL + '/admin.brand/single';

    url += '?id=' + info.value.id;
    axios.get( url ).then(function( res ){

        info.value = res.data;
        info.value.status += ''; // 转字符串， 否则不能正常显示

    });
}

const init = () => {

    info.value.id = route.params.id?route.params.id:0;

    if( info.value.id ){
        single();
    }
    
}

init();

const do_edit = () => {

    var url = VITE_URL + '/admin.brand/edit';
    url += '?brand_id=' + info.value.id;

    var data:any = {
        name:info.value.name,
        letter_pre:info.value.letter_pre,
        status:info.value.status,
        image : info.value.image,
    };

    var data_str = '';
    for( var p in data ){
        data_str += p + '=' + data[p] + '&';
    }

    axios.post( url, data_str ).then(function( res ){

        if( res.data.status == 0 ){

            ElMessage( {
                message: '保存成功',
                duration: 1000,
                // 'on-close':function(){
                //     router.push({path:'/main/brand/list'});
                // }
            } )
        }

    });

}

const parentbrandSelect = ( selected:any ) => {

    // console.log( selected )
    info.value.parent_id = selected.id;

}

const uploadSuccess = ( res:any ) => {

    // console.log( res )

    // info.value.image = VITE_URL + '/storage/' + res.data;
    // info.value.image =  '/storage/' + res;
    info.value.image =  res;
    
    
    
}
</script>

<style scoped>
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>